<template>
    
    <table border="1px" >
        <thead>
            <tr>
                <th>角色id</th>
                <th>角色名称</th>
                <th>角色描述</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="role in roleList" :key="role.roleId">
                <td>{{ role.roleId }}</td>
                <td>{{ role.roleName }}</td>
                <td>{{ role.description }}</td>
            </tr>

        </tbody>
    </table>
</template>

<script setup lang="ts" name="User">

    import { type RoleList } from '@/types/Role';
    import axios from 'axios';
    import {onMounted, ref } from 'vue';
    let roleList=ref<RoleList>([])
    
    //async 指的是当前的函数发送的请求是异步请求
    //await 一般和async一起使用，等待请求发送成功并且成功获得响应完成。
    async function getRoleList() {
        try {
            let {data}=await axios.get('/role/queryAll')
            roleList.value=data
        } catch (error) {
            console.log(error);
        }finally{
            console.log("我也一定要执行.....");
        }
    }

    onMounted(()=>{
        getRoleList()
    })

    


</script>


<style scoped>
table {
    width: 100%;
    border-collapse: collapse;
}

table caption {
    font-size: 2em;
    font-weight: bold;
    margin: 1em 0;
}

th,
td {
    border: 1px solid #999;
    text-align: center;
    padding: 20px 0;
}

table thead tr {
    background-color: #008c8c;
    color: #fff;
}

table tbody tr:nth-child(odd) {
    background-color: #eee;
}

table tbody tr:hover {
    background-color: #ccc;
}

table tbody tr td:first-child {
    color: #f40;
}

table tfoot tr td {
    text-align: right;
    padding-right: 20px;
}
</style>
